import classNames from 'classnames'
import clsaaes from './index.module.scss'
import { useMemo, useState } from 'react'
import { billTypeToName } from '@/contants/billList'
import Icon from '@/components/Icon'

const DayBill = ({ date, billList }) => {
  // 计算总账
  const { pay, incme, total } = useMemo(() => {
    if (billList) {
      let pay = billList
        .filter((item) => item.type === 'pay')
        .reduce((pre, item) => pre + item.money, 0)
      let incme = billList
        .filter((item) => item.type === 'income')
        .reduce((pre, item) => pre + item.money, 0)
      return { pay, incme, total: pay + incme }
    } else {
      return { pay: 0, incme: 0, total: 0 }
    }
  }, [billList])

  // 声明列表显影状态
  const [visible, setVisible] = useState(false)
  return (
    <div className={classNames(clsaaes.dayBill)}>
      <div className={clsaaes.header}>
        <div className={clsaaes.dateIcon}>
          <span className={clsaaes.date}>{date}</span>
          <span
            className={classNames(clsaaes.arrow, !visible && clsaaes.expand)}
            onClick={() => setVisible(!visible)}
          ></span>
        </div>
        <div className={clsaaes.oneLineOverview}>
          <div className={clsaaes.pay}>
            <span className={clsaaes.type}>支出</span>
            <span className={clsaaes.money}>{pay.toFixed(2)}</span>
          </div>
          <div className={clsaaes.income}>
            <span className={clsaaes.type}>收入</span>
            <span className={clsaaes.money}>{incme.toFixed(2)}</span>
          </div>
          <div className={clsaaes.balance}>
            <span className={clsaaes.money}>{total.toFixed(2)}</span>
            <span className={clsaaes.type}>结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      <div className={clsaaes.billList} style={{ display: !visible && 'none' }}>
        {billList.map((item) => {
          return (
            <div className={clsaaes.bill} key={item.id}>
              <Icon type={item.useFor} />
              <div className={clsaaes.detail}>
                <div className={clsaaes.billType}>{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames(clsaaes.money, item.type)}>{item.money.toFixed(2)}</div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default DayBill
